<template>
    <div>
        <nav-bar>
            <template v-slot:default>商品详情：{{id}}</template>
        </nav-bar>
        <!-- 图片 -->
        <van-image
            style="margin-top:30px"
            width="100%"
            lazy-load
            :src="detail.cover_url"
        />
        <!-- 详情信息 -->
        <van-card
            style="text-align: left"
            :num="detail.stock"
            :price="detail.price+'.00'"
            :desc="detail.description"
            :title="detail.title"
        >
            <template #tags>
                <van-tag plain type="danger">
                    {{detail.is_on==1 ? '上架' : '不上架'}}
                </van-tag>
                <van-tag plain type="danger">
                    {{detail.is_recommend==1 ? '推荐' : '不推荐'}}
                </van-tag>
            </template>
            <template #footer>
                <van-button size="warning" @click="handleAddCart">加入购物车</van-button>
                <van-button size="danger" @click="goToCart">立即购买</van-button>
            </template>
        </van-card>

        <van-tabs v-model="active">
            <van-tab title="概述">
                <div class="content" v-html="detail.details"></div>
            </van-tab>
            <van-tab title="热评" style="padding-bottom:50px">
                <div v-for="item in detail.comments" :key="item" class="con" >
                    {{item}}
                    <p>{{item.user_id}}</p>
                    <p>
                        <img :src="item.user.avatar_url" alt=""> &nbsp;&nbsp;&nbsp;&nbsp;
                        <span>{{item.user.name}}</span>
                    </p>
                    <p>
                        商品ID:{{item.goods_id}}
                        订单ID:{{item.order_id}}
                    </p>
                    <h3>评论：{{item.content}}</h3>
                    <h5>添加时间：{{item.created_at}}</h5>
                    <h5>修改时间：{{item.updated_at}}</h5>
                </div>
            </van-tab>
            <van-tab title="相关图书">
                <goods-list :goods="like_goods"></goods-list>
            </van-tab>
        </van-tabs>

    </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import GoodsList from 'components/content/goods/GoodsList'
import {useRoute,useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {ref,onMounted,reactive,toRefs} from 'vue'
import {getDetail} from 'network/detail'
// 引入购物车
import {addCart} from 'network/cart'
import { Toast } from 'vant'
import {useRtore} from 'vuex'
export default {
    name:'Detail',
    components:{
        NavBar,GoodsList
    },
    setup(){
        const route = useRoute();
        const active = ref(1);
        let id = ref(0);
        // 接收商品信息 -数据模型
        let book = reactive({
            detail:{},
            // 商品的基本信息
            like_goods:[]
        });
        //获取商品的信息
        onMounted(()=>{
            id.value = route.query.id;
            getDetail(id.value).then(res=>{
                book.detail = res.goods;
                book.like_goods = res.like_goods;
                // console.log(book.detail);
                // console.log(book.like_goods);
            })
        })
        // 添加购物车
        // 把商品的-book.detail.id-的id传过去,默认为1
        const store= useStore();
        const handleAddCart =()=>{
            addCart({goods_id:book.detail.id,num:1}).then(res=>{
                // res.status 查看状态码
                if(res.status == '201' || res.status == '204'){
                    Toast.success('添加成功');
                    //设置 store 中购物车的状态
                    store.dispatch('updateCart');
                }
            })
        }
        // 立即购买
        const router = useRouter();
        const goToCart = ()=>{
            addCart({goods_id:book.detail.id,num:1}).then(res=>{
                // res.status 查看状态码
                if(res.status == '201' || res.status == '204'){
                    Toast.success('添加成功,显示购物车');
                    //设置 store 中购物车的状态
                    store.dispatch('updateCart');
                    router.push({path:'/shopcart'})
                }
            })
        }
        return{
            id,
            // 返回book的每个结构
            ...toRefs(book),
            active,
            handleAddCart,
            goToCart
        }
    }
}
</script>
<style scoped lang="scss">
    .content{
        padding: 10px;
        img{
            max-width: 100%;
            height: auto;
        }
    }
    .con{
        padding: 10px;
        margin: 5px;
        img{
            width: 50px;
            height: 50px;
        }
    }
</style>
